<template>
	<!-- 设备出厂前检验表单 -->
	<div>
		<v-dialog v-model="checkInfo.checkDialog" persistent max-width="1250px">
			<v-card>
				<v-card-title>设备出厂前检验表单</v-card-title>

				<v-card-text>
					<v-alert text color="blue-grey" class="text-center">项目基本信息</v-alert>
					<v-row>
						<v-col cols="12" sm="2" md="4">
							<v-text-field label="项目编号" v-model="qaTaskShipmentModel.projectcode" disabled dense
								outlined>
							</v-text-field>
						</v-col>
						<v-col cols="12" sm="2" md="4">
							<v-text-field label="项目名称" v-model="qaTaskShipmentModel.projectname" disabled dense
								outlined>
							</v-text-field>
						</v-col>
						<v-col cols="12" sm="2" md="4">
							<v-text-field label="设备名称" v-model="qaTaskShipmentModel.equipmentname" disabled dense
								outlined>
							</v-text-field>
						</v-col>
						<v-col cols="12" sm="2" md="4">
							<v-text-field label="客户名称" v-model="qaTaskShipmentModel.customername" dense outlined>
							</v-text-field>
						</v-col>
						<v-col cols="12" sm="2" md="4">
							<v-text-field label="项目负责人" v-model="qaTaskShipmentModel.projectresponsible" dense outlined>
							</v-text-field>
						</v-col>
						<v-col cols="12" sm="2" md="4">
							<v-text-field label="设计人员" v-model="qaTaskShipmentModel.designer" dense outlined>
							</v-text-field>
						</v-col>
						<v-col cols="12" sm="2" md="4">
							<v-text-field label="装配人员" v-model="qaTaskShipmentModel.assembler" dense outlined>
							</v-text-field>
						</v-col>
						<v-col cols="12" sm="2" md="4">
							<v-text-field label="第几次检验" v-model="qaTaskShipmentModel.checknumber" dense outlined>
							</v-text-field>
						</v-col>
						<v-col cols="12" sm="2" md="4">
							<v-text-field label="检验时间" v-model="qaTaskShipmentModel.checkstarttime" disabled dense
								outlined>
							</v-text-field>
						</v-col>
					</v-row>

					<v-alert text color="blue-grey" class="text-center">机械部分(加工件)</v-alert>
					<v-row v-for="item in   dbShipMentDetailList.filter(r=>r.childrentypename=='加工件')" :key="item.id">
						<v-col cols="12" sm="2" md="4">
							<v-checkbox v-model="item.isqualified" :label="item.detail" dense></v-checkbox>
						</v-col>
					</v-row>

					<v-alert text color="blue-grey" class="text-center">机械部分(外购件)</v-alert>
					<v-row v-for="item in dbShipMentDetailList.filter(r=>r.childrentypename=='外购件')" :key="item.id">
						<v-col cols="12" sm="2" md="6">
							<v-checkbox v-model="item.isqualified" :label="item.detail" dense></v-checkbox>
						</v-col>
					</v-row>

					<v-alert text color="blue-grey" class="text-center">机械部分(装配情况)</v-alert>
					<v-row v-for="item in dbShipMentDetailList.filter(r=>r.childrentypename=='装配情况')" :key="item.id">
						<v-col cols="12" sm="2" md="6">
							<v-checkbox v-model="item.isqualified" :label="item.detail" dense></v-checkbox>
						</v-col>
					</v-row>

					<v-alert text color="blue-grey" class="text-center">机械部分(装配情况)</v-alert>
					<v-row v-for="item in dbShipMentDetailList.filter(r=>r.childrentypename=='装配情况')" :key="item.id">
						<v-col cols="12" sm="2" md="6">
							<v-checkbox v-model="item.isqualified" :label="item.detail" dense></v-checkbox>
						</v-col>
					</v-row>

					<v-alert text color="blue-grey" class="text-center">机械部分(功能)</v-alert>
					<v-row v-for="item in dbShipMentDetailList.filter(r=>r.childrentypename=='功能')" :key="item.id">
						<v-col cols="12" sm="2" md="6">
							<v-checkbox v-model="item.isqualified" :label="item.detail" dense></v-checkbox>
						</v-col>
					</v-row>

					<v-alert text color="blue-grey" class="text-center">电气部分(功能)</v-alert>
					<v-row v-for="item in dbShipMentDetailList.filter(r=>r.childrentypename=='电器柜')" :key="item.id">
						<v-col cols="12" sm="2" md="6">
							<v-checkbox v-model="item.isqualified" :label="item.detail" dense></v-checkbox>
						</v-col>
					</v-row>

					<v-alert text color="blue-grey" class="text-center">电气部分(控制界面)</v-alert>
					<v-row v-for="item in dbShipMentDetailList.filter(r=>r.childrentypename=='控制界面')" :key="item.id">
						<v-col cols="12" sm="2" md="6">
							<v-checkbox v-model="item.isqualified" :label="item.detail" dense></v-checkbox>
						</v-col>
					</v-row>

					<v-alert text color="blue-grey" class="text-center">电气部分(设备上)</v-alert>
					<v-row v-for="item in dbShipMentDetailList.filter(r=>r.childrentypename=='设备上')" :key="item.id">
						<v-col cols="12" sm="2" md="6">
							<v-checkbox v-model="item.isqualified" :label="item.detail" dense></v-checkbox>
						</v-col>
					</v-row>

					<v-alert text color="blue-grey" class="text-center">外观部分</v-alert>
					<v-row v-for="item in dbShipMentDetailList.filter(r=>r.type==8)" :key="item.id">
						<v-col cols="12" sm="2" md="6">
							<v-checkbox v-model="item.isqualified" :label="item.detail" dense></v-checkbox>
						</v-col>
					</v-row>
				</v-card-text>

				<v-card-actions>
					<v-spacer></v-spacer>
					<div>
						<v-btn class="ml-3" color="success" text @click="shipmentSubmit">
							确定
						</v-btn>
						<v-btn color="blue darken-1" text @click="cannel">
							退出
						</v-btn>
					</div>
				</v-card-actions>
			</v-card>
		</v-dialog>
	</div>
</template>

<script>
	import print from 'print-js'
	import {
		format,
		parseISO
	} from 'date-fns'

	export default {
		name: 'product_delivery_check',
		props: {
			callBackLoadProcessCards: {
				type: Function, //参数类型：函数
			},
			checkInfo: {
				//出货明细id
				prodeliverydetailid: 0,
				childrenId: 0,
				checkDialog: false,
			}
		},
		data: () => ({
			dbShipMentDetailList: [],
			qaTaskShipmentModel: {}
		}),
		watch: {
			checkInfo: {
				handler(newVal) {
					this.$emit('update:checkInfo', newVal)
					this.loadChildren()
					this.loadShipmentdetailList()
				},
				deep: true
			},
		},
		methods: {
			async loadChildren() {
				if (!this.checkInfo.checkDialog)
					return
				const response = await this.$httpRequest({
					url: `MES/MESProductDeliveryCheck/GetChildrenOrder?childrenId=${this.checkInfo.childrenId}`,
					method: 'get'
				});
				if (response.status == 1) {
					// this.qaTaskShipmentModel.prodeliverydetailid=response.data.id
					this.qaTaskShipmentModel.projectcode = response.data.projectcode
					this.qaTaskShipmentModel.projectname = response.data.projectname
					this.qaTaskShipmentModel.customername = response.data.customername
					this.qaTaskShipmentModel.equipmentname = response.data.name
					this.qaTaskShipmentModel.projectresponsible = response.data.projectresponsible
					this.qaTaskShipmentModel.designer = response.data.designer
					this.qaTaskShipmentModel.assembler = response.data.assemblyer
					this.qaTaskShipmentModel.checkstarttime = format(parseISO(new Date().toISOString()),
						'yyyy-MM-dd')
					this.qaTaskShipmentModel.shipmentdetailjson = ''
				}

			},
			//加载检验明细
			async loadShipmentdetailList() {
				if (!this.checkInfo.checkDialog)
					return
				const response = await this.$httpRequest({
					url: `MES/MESProductDeliveryCheck/LoadShipmentDetailList`,
					method: 'get'
				});

				if (response.status == 1) {
					this.dbShipMentDetailList = response.data
				}
			},
			async shipmentSubmit() {
				this.qaTaskShipmentModel.prodeliverydetailid = this.checkInfo.prodeliverydetailid
				this.qaTaskShipmentModel.shipmentdetailjson = JSON.stringify(this.dbShipMentDetailList)

				const response = await this.$httpRequest({
					url: `MES/MESProductDeliveryCheck/Add`,
					method: 'post',
					data: this.qaTaskShipmentModel
				});
				if (response.status == 1) {
					this.checkInfo.checkDialog = false
					this.$message.success(response.info)
				} else {
					this.$message.error(response.info)
				}
			},
			cannel() {
				this.checkInfo.checkDialog = false
			},
			printContext() {

				printJS({
					printable: 'print',
					type: 'html',
					documentTitle: '装配终检',
					targetStyles: ['*'],
					ignoreElements: ['no-print'],
				})

				this.productDelivery.printPackingOrderDialog = false
			},
		}
	}
</script>


<style scoped>
	.main {
		background: #aaf5aa;
	}

	.dayin {
		/* 	width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center; */
		flex-direction: column;

		@media print {
			text-align: center;
			width: 100%;
			margin: auto;
			page-break-after: always;
			margin-top: 20px;
			font-family: "微软雅黑";
		}



		#print {
			text-align: center;

			.content {}

			.btn {}
		}
	}


	.tab {
		table-layout: fixed;
		width: 1200px;
		border-left: 1px solid #000;
		border-top: 1px solid #000;
		padding: 0px;
		margin: 0px;
		border-spacing: 0px;

		.top-tbody {}

		.bottom-tbody {
			.column-1 {
				width: 50px;
			}

			.column-2 {
				width: 180px;
			}

			.column-3 {
				width: 160px;
			}

			.column-4 {
				width: 120px;
			}

			.column-5 {
				width: 150px;
			}

			.column-body-1 {}

			.column-body-2 {}

			.column-body-3 {}

			.column-body-4 {}

			.column-body-5 {}
		}

		.tr-head {
			height: 25px;
		}

		.tr-body {}

		.td-bold {
			font-weight: bold;
		}

		.td-center {
			text-align: center;
		}

		.td-left {
			text-align: left;
		}

		.td-body-color {
			color: black;
		}
	}

	.Result0 {}

	.Result1 {
		color: gray;
	}

	.tab td {
		overflow: hidden;
		text-overflow: ellipsis;
		border-bottom: 1px solid #000;
		border-right: 1px solid #000;
		padding: 0px;
		margin: 0px;
		border-spacing: 1px;
	}
</style>
